<div [@routerTransition]>
    <div class="m-content">
     
                <div class="m-portlet m-portlet--mobile"  >
                        <div class="m-subheader">
                                <div class="align-items-center row" style="margin: 0;">
                                
                        
                                    <div class="float-left" style="min-width: 240px;">
                                        <label>关键字</label>
                                        <input
                                            [(ngModel)]="filterText"
                                            style="width: 180px; display: inline-block; margin: 0 10px;"
                                            name="filterText"
                                            autoFocus
                                            class="form-control m-input"
                                            [placeholder]="l('SearchWithThreeDot')"
                                            type="text"
                                        />
                                    </div>
                        
                                    <div class="float-left mr-auto" style="min-width: 80px;">
                                        <button (click)="getRooms($event)" class="btn btn-primary blue" type="submit">
                                            <i class="flaticon-search-1" [attr.aria-label]="l('Search')"> </i> 查询
                                        </button>
                                    </div>
                        
                                    <div class="float-right ml-auto" style="margin-left: 10px; min-width: 160px;">
                                        <button
                                            (click)="createOrEditRoomModal.show()"
                                            *ngIf="permission.isGranted('Pages.Administration.Roles')"
                                            class="btn btn-primary blue"
                                        >
                                            新增
                                        </button>
                                        <ng-container *ngIf="selectedValues.length == 1">
                                            <button
                                                (click)="createOrEditRoomModal.show(selectedValues[0].id)"
                                                class="btn btn-primary blue"
                                                type="submit"
                                            >
                                                <i [attr.aria-label]="l('Update')"> </i> 更新
                                            </button>
                                            <button (click)="selectedDelete()" class="btn btn-danger" type="submit">
                                                <i [attr.aria-label]="l('Delete')"> </i> 删除
                                            </button>
                                        </ng-container>
                                        <ng-container *ngIf="selectedValues.length > 1">
                                            <button (click)="selectedDelete()" class="btn btn-danger" type="submit">
                                                <i [attr.aria-label]="l('Delete')"> </i> 批量删除
                                            </button>
                                        </ng-container>
                                        <!-- <button (click)="batchDelete()" class="btn btn-danger" type="submit"><i> </i> 清空数据</button>
                                        <button (click)="excelModal.show('Cost_FinancialCost', '财务费')" class="btn btn-primary blue">
                                            导入
                                        </button> -->
                                    </div>
                                </div>
                            </div>
                    <div class="m-portlet__body">
                        <div class="tabbable-line">
                            <div class="tab-content" style="padding-top:0;">
                                <div class="tab-pane active" id="tab-model">
                                    <div class="row align-items-center">
                                        <div
                                            class="primeng-datatable-container"
                                            [busyIf]="primengTableHelper.isLoading"
                                        >
                                            <p-table
                                                #dataTable
                                                (onLazyLoad)="getTableData($event)"
                                                [value]="primengTableHelper.records"
                                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                [paginator]="false"
                                                [lazy]="true"
                                                [scrollable]="true"
                                                ScrollWidth="100%"
                                                [responsive]="primengTableHelper.isResponsive"
                                                [resizableColumns]="primengTableHelper.resizableColumns"
                                                selectionMode="multiple"
                                                [(selection)]="selectedValues"
                                            >
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 40px">
                                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                        </th>
                                                        <th style="width: 40px">
                                                            序号
                                                        </th>
                                                        <ng-container *ngFor="let ext of extensions">
                                                            <th width="{{ ext.width }}">
                                                                {{ ext.title }}
                                                            </th>
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>

                                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                                    <tr [pSelectableRow]="record">
                                                        <td style="width: 40px">
                                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                        </td>

                                                        <td style="width: 40px">
                                                            {{ i + 1 + paginator.first }}
                                                        </td>
                                                        <ng-container *ngFor="let ext of extensions">
                                                            <ng-container [ngSwitch]="ext.formatType">
                                                                <ng-container *ngSwitchCase="1">
                                                                    <td width="{{ ext.width }}">
                                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchCase="2">
                                                                    <td width="{{ ext.width }}">
                                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchCase="4">
                                                                    <td width="{{ ext.width }}">
                                                                        {{
                                                                            record[ext.key] | momentFormat: 'YYYY-MM-DD'
                                                                        }}
                                                                    </td>
                                                                </ng-container>
                                                                <ng-container *ngSwitchDefault>
                                                                    <td width="{{ ext.width }}">
                                                                        {{ record[ext.key] }}
                                                                    </td>
                                                                </ng-container>
                                                            </ng-container>
                                                        </ng-container>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <!-- <p-contextMenu #cm [model]="itemContextMenuItems"></p-contextMenu> -->
                                            <div class="primeng-paging-container">
                                                <p-paginator
                                                    [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                    #paginator
                                                    (onPageChange)="getTableData($event)"
                                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                                    [rowsPerPageOptions]="
                                                        primengTableHelper.predefinedRecordsCountPerPage
                                                    "
                                                >
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
       
    </div>
    <createOrEditRoomModal #createOrEditRoomModal (modalSave)="getTableData()"></createOrEditRoomModal>
    <!-- <excelModal #excelModal (modalSave)="getTableData($event)"></excelModal> -->
</div>
